﻿*
{
    background-color: #543554;
    color: #c2bcc2;
    font-family: 'Xolonium'; 
    font-weight: normal; 
    font-style: normal; 
}

html 
{
  padding:0;
  margin:0;
  background-image: -webkit-radial-gradient(center, ellipse cover,#543554 0%, black 100%);
  background-image: -moz-radial-gradient(center, ellipse cover,#543554 0%, black 100%);
  background-image: -ms-radial-gradient(center, ellipse cover,#543554 0%, black 100%);
  background-image: -o-radial-gradient(center, ellipse cover,#543554 0%, black 100%);
  background-image: radial-gradient(ellipse at center,#543554 0%, black 100%);
  height:  100%;
}
body
{
  padding:0;
  margin:0;
  background-color: Transparent ;
  height: 100%;
}
form
{
  background-color:Transparent;
  height : 100%;
}

#Login {position: relative;width:100%;height:100%; background-color:Transparent;}
#Login div{
  position :absolute;
  display:none;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  
  background: rgba(0,223,252,.02);
  border:solid #210321 .1rem;
  box-shadow:1rem 1rem 5rem 0rem #000; 
  text-align:center;
  border-radius:.4rem .4rem .4rem .4rem;
}

#Login div.Visible
{
  display:block;
  -webkit-animation: Caida 600ms ease both;
  -moz-animation: Caida 600ms ease both;
  -o-animation: Caida 600ms ease 1ms both;
  animation: Caida 600ms ease 1ms both;
}


@-webkit-keyframes Caida {
  0% {top: 25%;box-shadow:3rem 3rem 9rem 2rem #000;}
  100% {top:30%;box-shadow:1rem 1rem 5rem 0rem #000}
}

@-webkit-keyframes Salida {
  0% {top: 0%;}
  100% {top: 30%;}
}

@-moz-keyframes Caida {
  0% {top: 25%;box-shadow:3rem 3rem 9rem 2rem #000;}
  100% {top:30%;box-shadow:1rem 1rem 5rem 0rem #000}
}

@-moz-keyframes Salida {
  0% {top: 0%;}
  100% {top: 30%;}
}

@-o-keyframes Caida {
  0% {top: 25%;box-shadow:3rem 3rem 9rem 2rem #000;}
  100% {top:30%;box-shadow:1rem 1rem 5rem 0rem #000}
}

@-o-keyframes Salida {
  0% {top: 0%;}
  100% {top: 30%;}
}

@keyframes Caida {
  0% {top: 25%;box-shadow:3rem 3rem 9rem 2rem #000;}
  100% {top:30%;box-shadow:1rem 1rem 5rem 0rem #000}
}

@keyframes Salida {
  0% {top: 0%;}
  100% {top: 30%;}
}

#Login div[modal=true]
{
    position:absolute ;
    display:none;
    -webkit-transform: translateX(0%);
    -webkit-animation:none;
    -moz-transform: translateX(0%);
    -moz-animation:none;
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    animation:none;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color :rgba(0,223,252,.02);
    border-radius:0;
    border:none;
    margin:0;
    z-index:1000;
   
}
#Login div[modal=true].Visible 
{
    display:block;
}
#Login div[modal=true].Visible div
{
   position:absolute ;
   display:block;
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
  
   box-shadow:1rem 1rem 5rem 0rem #000;
   font-size : 12px;
   -webkit-animation: Salida 600ms ease 0s both;
   -moz-animation: Salida 600ms ease 0s both;
   -o-animation: Salida 600ms ease 1ms both;
   animation: Salida 600ms ease 1ms both;
  
    
   width:auto;    
   background-color :black;
   border-radius:.4rem;
   
}     

#Login div[modal=true].Visible div h3
{
  padding:.2rem;

}

#Login div[modal=true].Visible div span
{
    display:block;
    margin :1rem 2rem 1rem 2rem;
    background-color :transparent;
}

#Login div input[type="text"],input[type="password"] {
  display :block;
  padding:.5rem;
  border-radius: .2rem;
  background-color:#663966;
  border: solid .1rem #a88fa8;
  display:block;
  margin:1rem;
  
}
#Login div h3 {
  margin:0rem;
  background: linear-gradient(90deg, #754f75 10%, #754f90 100%);
  background: -moz-linear-gradient(90deg, #754f75 10%, #754f90 100%);
  background: -webkit-linear-gradient(90deg, #754f75 10%, #754f90 100%);
  text-align:center;
  border: solid 0px;
  padding:.5rem;
  border-top-left-radius : .4rem;
  border-top-right-radius : .4rem;
}

#Login div button 
{
  cursor:pointer;
  text-align:center;
  margin:0rem;
  padding:.2rem;
  float:right;
  border:none;

}
#Login div button[icono=Entrar],button[icono=Aceptar],button[icono=Enviar]
{
  box-shadow: inset 0px 1px 12px black;
}

#Login div button[icono=Entrar]:before,button[icono=Aceptar]:before,button[icono=Enviar]:before
{
   font-family: 'UniCons'; 
   font-weight: normal; 
   font-style: normal;
   font-size : 30px;
   content : "c";
   margin:.1rem;
   padding-left :.5rem;
   box-shadow: inset 0 1px rgba(255,255,255,0.2), 
               inset 0 -5px 15px rgba(0,0,0,0.4),
               0 5px 10px rgba(0,0,0,0.5);
   background: -webkit-linear-gradient(225deg, rgba(255,255,255,.1) 20%, rgba(0,0,0,.1) 80%);
   background: -mox-linear-gradient(225deg, rgba(255,255,255,.1) 20%, rgba(0,0,0,.1) 80%);
   background: linear-gradient(225deg, rgba(255,255,255,.1) 20%, rgba(0,0,0,.1) 80%);
   background-color: rgba(0,0,0,0.3); 
   color:Orange;
   border-radius:.2rem;
}

#Login div button[icono=Entrar]:hover:before,button[icono=Aceptar]:hover::before,button[icono=Enviar]:hover:before
{
   text-shadow: 1px 1px 12px Orange;
}


#Login div button[icono=Cerrar]
{
    background: rgba(0,223,252,.05);
    border:1px dotted rgba(0,223,252,.1);
    border-left:solid .1rem black;
    border-radius: 0 .4rem 0 0 ;
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: 0rem;
    height: 0rem;
    padding: 1.1rem;
    margin:0rem;
    color: transparent;
}
#Login div button[icono=Cerrar]:before 
{
  content: "X";
  position:absolute;
  padding: 1rem;
  top:-.4rem;
  left:-.2rem;
  width:0rem;
  height:0rem;
  color:#3d083d;
  backgound-color:#3d083d;
  font-weight:500;
}
#Login div button[icono=Cerrar]:hover
{
   color:Orange ;
  
}
#Login div button[icono=Cerrar]:hover:before 
{
    color:Orange ;
}



#Login ul {
  position:absolute;
  left:75%;
  list-style: none;
  background-color:transparent;
  width:0px;
}
#Login ul li{
  
  display:block;
  padding: 1rem 1rem 1rem 1rem;
  cursor:pointer;
  width:200px;
  background: rgba(0,223,252,.02);
  border:1px dotted rgba(0,223,252,.05);
  text-align:center
  
}

#Login ul li:before
{
   font-family: 'UniCons'; 
   font-weight: normal; 
   font-style: normal;
   font-size : 24px;
   float:left;
}
#Login ul li:hover:before
{
    color:Orange ;
}

#Login ul li[icono=Iniciar]:before
{
   content :"9";
 }
 #Login ul li[icono=Recuperar]:before
{
   content :"s";
 }
 #Login ul li[icono=Registrar]:before
{
   content :"a";
 }
  #Login ul li[icono=Usuario]:before
{
   content :"u";
 }
 
  #Login ul li[icono=Config]:before
{
   content :"s";
 }
  #Login ul li[icono=Salir]:before
{
   content :"x";
   
 }


#Login ul li:hover{
  border:1px dotted rgba(0,223,252,.05);
  background: rgba(0,223,252,.05);
}
#Login ul li span{
   background: rgba(0,223,252,.02);
}



 #MenuSistema 
    {
        position: absolute;
        top:0px;
        left:0px;
        padding:0;
        font-size:12px;
        background-color:transparent;
    
    }


    .Menu {
        position: relative;
        float: left;
        padding-right: 3rem;
        
        width:auto;
        
    }

    .Menu, .Menu ul 
    {
  
        list-style: none;
        background:transparent;
 
    }
    
    .Menu > li {
        float: left;
        position: relative;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        background:rgba(0,223,252,.05);
        border:1px dotted rgba(0,223,252,0);
    }
    .Menu >li:hover
    {
        border:1px dotted rgba(0,223,252,.1);
        background: rgba(0,223,252,.1);
        
    }
    .Menu > li a span{
        background:rgba(0,223,252,0);
    }


    .Menu a 
    {
        padding: .8rem 1rem .8rem 1rem;
        display: block;
        text-decoration: none;
        background: transparent;		
    }
    
    

    .Menu li:hover > a span{
        color: #ECECD7;
        background-color:transparent;
    }
    
    .Menu li ul  {
        position: absolute;
        left: 0;
        z-index: 100;
        width: 200px;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        
         background: transparent;	
    }

    .Menu li:hover > ul {
        padding: 0;
        opacity: 1;
        visibility: visible;
        box-shadow: 1px 1px 7px rgba(0,0,0,.5);
        -webkit-animation: Colgante 1s ease 0s both;
        -moz-animation: Colgante 1s ease 0s both;
        -o-animation: Colgante 1s ease 1ms both;
        animation: Colgante 1s ease 1ms both;
        background: transparent;	
    }

    
    .Menu li li{position:relative; background: transparent;	}
    .Menu li li a.Submenu:after{
        font-family: 'UniCons'; 
        font-weight: normal; 
        font-style: normal;
        font-size : 24px;
        background-color:transparent;
    	content: '3';
    	display: inline-block;
        float:right;
        color:Orange;
    }

    
    
    .Menu li li ul{z-index: 70 !important;position:absolute;display:none;top:0px;left:195px;width:250px}
    .Menu li li:hover > ul
    {
        display:block;
        -webkit-animation: Colgante 1s ease 0s both;
        -moz-animation: Colgante 1s ease 0s both;
        -o-animation: Colgante 1s ease 1ms both;
        animation: Colgante 1s ease 1ms both;
    }
    
   
    
   
    .Menu li li a
    {
        border-top: dotted 1px transparent;
        border-bottom: dotted 1px transparent;
        
    }
    
    .Menu li li:hover > a:hover {
        color: rgba(0,223,252,1);
        border-top: dotted 1px rgba(255,255,255,.15);
        border-bottom: dotted 1px rgba(255,255,255,.15);
        background: rgba(0,223,252,.02);
    }

    @-webkit-keyframes Colgante {
        0% {
            opacity: .99999;
            -webkit-transform: rotateX(90deg);
        }
        30% {			
            -webkit-transform: rotateX(-20deg) rotateY(5deg);
            -webkit-animation-timing-function: ease-in-out;
        }
        65% {
            -webkit-transform: rotateX(20deg) rotateY(-3deg);
            -webkit-animation-timing-function: ease-in-out;
        }
        100% {
            -webkit-transform: rotateX(0);
            -webkit-animation-timing-function: ease-in-out;
        }
    }
    
     @-moz-keyframes Colgante {
        0% {
            opacity: .99999;
            -moz-transform: rotateX(90deg);
        }
        30% {			
            -moz-transform: rotateX(-20deg) rotateY(5deg);
            -moz-animation-timing-function: ease-in-out;
        }
        65% {
            -moz-transform: rotateX(20deg) rotateY(-3deg);
            -moz-animation-timing-function: ease-in-out;
        }
        100% {
            -moz-transform: rotateX(0);
            -moz-animation-timing-function: ease-in-out;
        }
    }
    
    @-o-keyframes Colgante {
        0% {
            opacity: .99999;
            -o-transform: rotateX(90deg);
        }
        30% {			
            -o-transform: rotateX(-20deg) rotateY(5deg);
            -o-animation-timing-function: ease-in-out;
            
        }
        65% {
            -o-transform: rotateX(20deg) rotateY(-3deg);
            -o-animation-timing-function: ease-in-out;
        }
        100% {
            -o-transform: rotateX(0);
            -o-animation-timing-function: ease-in-out;
        }
    }

    @keyframes Colgante {
        0% {
            opacity: .99999;
            transform: rotateX(90deg);
            
        }
        30% {			
 
            transform: rotateX(-20deg) rotateY(5deg);
            animation-timing-function: ease-in-out;
        }
        65% {
 
            transform: rotateX(20deg) rotateY(-3deg);
            animation-timing-function: ease-in-out;

        }
        100% {
 
            transform: rotateX(0);
            animation-timing-function: ease-in-out;
 
        }
    }
   
   

        .TablaRef
        {
            position: absolute;
            float: left;
            bottom:0%;
            background-color: rgba(0,223,252,.02);
            font-size: 10px;
        }
        .TablaRef h3
        {
             padding: .3rem;
            color: White;
            background-color:  rgba(0,223,252,.02);
        }
        .TablaRef table
        {
            background-color:  rgba(0,223,252,.02);
            width:100%;
        }
        .TablaRef table tr 
        {
            background-color:  rgba(0,223,252,.02);
        }
        .TablaRef table tr td
        {
            padding: .3rem;
            background-color: rgba(0,223,252,.02);
        }
        .TablaRef table tr th
        {
             padding: .3rem;
            background-color: rgba(0,223,252,.02);
             color: Orange;
        }
